Array of panel objects.

<div class="definition">
    Array, default = []
</div>

See <a class="method" href="w2layout.panel_template">.panel_template()</a> for all properties in this object.
<div style="height: 20px"></div>

If you change this array during run-time you will need to call <a href="w2layout.refresh">.refresh()</a> method to update layout on
the screen. It is not recommended to change this array after the object has been created. You should use <a href="w2layout.set">.set()</a>
method to change panels dynamically, which will refresh the panel you changed.

<textarea class="javascript">
let layout = new w2layout({
    name    : 'layout',
    panels  : [
        { type: 'top', size: 40 },
        { type: 'preview', size: 200 }
    ]
});

w2ui.layout.set('top', { size: 50 });
</textarea>

As of version 1.2+ you can add w2tabs or/and w2toolbar object at the top of the panel.
<textarea class="javascript">
let layout = new w2layout({
    name    : 'layout',
    panels  : [
        { type: 'top', size: 40 },
        { type: 'main',
            tabs: {
                active: 'tab1',
                tabs: [
                    { id: 'tab1', text: 'Tab 1' },
                    { id: 'tab2', text: 'Tab 2' },
                    { id: 'tab3', text: 'Tab 3' },
                    { id: 'tab4', text: 'Tab 4' }
                ],
                onClick: function (id, data) {
                    console.log(id);
                }
            }
        },
        { type: 'preview', size: 200 }
    ]
});
</textarea>

As of version 1.5+ you can set negative size of left and right panel. If size is negative, the panel will take all available size minus the
size you specified. In other words the size of the panel (only left or right) will be 100% of available size - defined size of the panel.